<template>
    <div>
        <div id="lg-top" style="width: 1475px;height: 110px;background: white">
            <div style="width: 1200px;height: 110px;margin-left: 200px;padding-top: 20px">
                <div style="float: left">
                    <a href="www.baidu.com">
                        <img src="http://static.roncoos.com/os/10.png" width="240px" height="52px">
                    </a>
                </div>
                <div style="float: right">
                    <a href="www.baidu.com">返回首页</a>
                </div>
            </div>
        </div>
        <div id="lg-main">

            <div id="main">
                <div style="width: 380px;height: 40px;float: top">
                    <span class="btn" v-bind:class="{tocheck : show===0}" @click="show = 0">登录</span>
                    <span class="btn" v-bind:class="{tocheck : show===1}" @click="show = 1">注册</span>

                </div>
                <br style="width: 380px;color: darkgray;height: 2px"/>
                <!--登录-->
                <transition name="el-zoom-in-center">
                    <div v-show="show==0" class="loginfrom">
                        <div class="transition-box loginfrom">
                            <el-input
                                    placeholder="请输入手机号或邮箱"
                                    v-model="logindata.username"
                                    clearable>
                            </el-input>
                            <br>
                            <br>
                            <el-input
                                    placeholder="请输入密码"
                                    v-model="logindata.password"
                                    clearable>
                            </el-input>
                            <br>
                            <br>

                            <el-button type="danger" style="width: 320px" @click="weblogin">登录</el-button>
                            <div style="margin-top: 20px">
                                <el-checkbox v-model="autologin" style="float: left">下次自动登录</el-checkbox>
                                <span style="float: right;color: deepskyblue">忘记密码</span>
                            </div>
                        </div>
                    </div>
                </transition>
                <!--注册-->
                <transition name="el-zoom-in-bottom">
                    <div v-show="show==1" class="transition-box">
                        <div>
                            <el-input
                                    placeholder="请输入手机号"
                                    v-model="registerdata.mobile"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    @blur="vaildPhone"
                                    @focus="inputfocus"
                                    clearable
                                    :disabled="isdisabled"
                            >
                            </el-input>
                            <br>
                            <br>
                            <el-input
                                    placeholder="请输入验证码"
                                    v-model="inmessage"
                                    clearable
                                    style="float: left;width: 190px;height: 46px">
                            </el-input>
                            <el-button type="primary" style="width: 110px" plain @click="getMessage" :disabled="issend">
                                {{content}}
                            </el-button>
                            <br>
                            <br>
                            <el-input
                                    placeholder="6-20位密码，可用数字/字母/符号组合"
                                    v-model="fpassword"
                                    show-password>
                            </el-input>
                            <br>
                            <br>
                            <el-input
                                    placeholder="请重复密码"
                                    v-model="spassword"
                                    show-password>
                            </el-input>
                            <br>
                            <br>
                            <div style="margin-top: 20px">
                                <el-checkbox v-model="agree" @click="!agree" style="float: left">我已同意<a
                                        href="https://admin.qidian.qq.com/template/blue/website/agreement.html">《用户协议》</a>
                                </el-checkbox>
                            </div>
                            <el-button type="danger" style="width: 320px" @click="register">注册</el-button>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
        <div id="lg-bot"></div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                //显示的判断0登录1注册
                show: 0,
                //登录对象
                logindata: {},
                //注册对象
                registerdata:{},
                //自动登录
                autologin: false,
                //写入的验证码
                inmessage: '',
                //第一次密码
                fpassword: '',
                //第二次密码
                spassword: '',
                //手机号不可更改
                isdisabled: false,
                //同意用户手册
                agree: false,
                //手机号是否合法
                isphone: false,
                //密码是否合法
                ispassword: false,
                //获得到的验证码
                message: '',
                //验证码发送状态
                issend: false,
                //按钮内文本
                content: "发送验证码",
                //倒计时时间
                totalTime: 60,
            }
        },
        methods: {
            //登录
            weblogin() {
                var that = this;
                this.$http.post(`/sso/webLogin`, that.logindata).then(function (success) {
                    if (success.data.code === 200) {
                        that.$message.success(success.data.msg);
                        //把用户的key保存起来. sessionStorage   | localStorage 本地
                        sessionStorage.setItem("token", success.data.result);
                        sessionStorage.setItem("loginusername", that.logindata.username);
                        sessionStorage.setItem("phone",that.logindata.mobile);
                        that.$router.push('index')
                    } else {
                        that.$message.error(success.data.msg)
                    }
                })
            },
            //注册
            register() {
                var that=this;
                //验证是否同意用户注册
                if (this.agree) {
                    //是否发送短信
                    if (this.message !== '') {
                        //是否填写验证码
                        if (this.inmessage !== '') {
                            //匹配验证码
                            if (this.inmessage === this.message) {
                                //比较两次密码
                                if (this.fpassword === this.spassword) {
                                    this.registerdata.password=this.fpassword
                                    this.$http.post(`/member/webSignIn`,this.registerdata).then(function (success) {
                                        if (success.data.code===200){
                                            that.$message.success(success.data.msg)
                                            that.$router.push("/")
                                        }else {
                                            that.$message.error(success.data.msg)
                                        }
                                    })
                                } else {
                                    this.$message.error("两次密码不一致")
                                }
                            } else {
                                this.$message.error("请仔细查看验证码是否正确")
                            }
                        } else {
                            this.$message.error("请填写验证码")
                        }
                    } else {
                        this.$message.error("请获取验证码")
                    }
                } else {
                    this.$message.error("请先阅读并同意用户协议")
                }
            },
            //输入框聚焦事件
            inputfocus() {
            },
            //验证手机号
            vaildPhone() {
                var that = this;
                var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                let str = this.registerdata.mobile;
                if (re.test(str)) {
                    //查询手机号是否被注册过
                    this.$http.get(`/member/selectPhoneIsNone/${str}`).then(function (success) {
                        if (success.data.code === 200) {
                            that.isphone = true;
                            that.isdisabled = true;
                            that.$message.success(success.data.msg)
                        } else {
                            that.$message.error(success.data.msg)
                        }
                    })
                } else {
                    this.$message.error('抱歉手机号不合法')
                    this.isphone = false;
                }
            },
            //获取短信
            getMessage() {
                var that = this;
                //点击之后设置按钮不可取
                this.issend = true;
                //按钮内文本
                this.content = this.totalTime + "s后重新发送";
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    this.content = this.totalTime + "s后重新发送";
                    if (this.totalTime < 0) {
                        window.clearInterval(clock);
                        this.content = "重新发送";
                        this.totalTime = 60;
                        this.issend = false;
                    }
                }, 1000);
                this.$http.get(`/member/getMessage/${that.registerdata.mobile}`).then(function (success) {
                    that.message = success.data.result;
                    console.log(that.message)
                })
            },
        },
        created() {
            //判断登录还是注册
            const routerParams = this.$route.query.key
            this.show=routerParams;
        }
    }
</script>

<style scoped>

    #main {
        width: 380px;
        background: white;
        border-radius: 15px;
        position: relative;
        top: 100px;
        left: 900px
    }



    /deep/input::-webkit-input-placeholder {
        color: black;
    }
    /deep/input::-moz-input-placeholder {
        color: black;
    }
    /deep/input::-ms-input-placeholder {
        color: black;
    }


    .loginfrom {
        width: 380px;
        height: 250px;
    }

    .btn {
        font-size: 20px;
        width: 190px;
        height: 40px;
        display: inline-block;
        padding-top: 20px;
    }

    .transition-box {
        margin-bottom: 10px;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        padding: 20px 30px;
        box-sizing: border-box;
        margin-right: 20px;
    }

    #lg-main {
        background-image: url("http://edu.os.roncoo.com/_nuxt/img/2d49394.jpg");
        background-position-x: -200px;
        left: -300px;
        width: 1475px;
        height: 600px;
    }
</style>